import * as THREE from 'three'
import createApp from '../../core'

function createSpriteMaterial (dom: HTMLElement) {
  const { camera, scene } = createApp(dom)
  camera.position.set(-150, 100, 120)
  camera.lookAt(scene.position)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  createSprites(scene)

  createImageSprite(scene)
}

function createSprites (scene: THREE.Scene) {
  for (let y = -2; y < 3; y++) {
    for (let z = -20; z < 20; z++) {
      for (let x = -20; x < 20; x++) {
        const material = new THREE.SpriteMaterial({
          color: Math.random() * 0xffffff,
          transparent: true,
          opacity: 0.5
        })
        const sprite = new THREE.Sprite(material)
        sprite.position.set(x * 5, y * 10, z * 5)
        scene.add(sprite)
      }
    }
  }
}

function createImageSprite (scene: THREE.Scene) {
  const loader = new THREE.TextureLoader()
  import('@/assets/material/tile.jpg').then(img => {
    loader.load(img.default, texture => {
      const material = new THREE.SpriteMaterial({
        map: texture
      })
      const sprite = new THREE.Sprite(material)
      sprite.scale.x = 40
      sprite.scale.y = 40
      sprite.position.set(100, 100, 100)
      scene.add(sprite)
    })
  })
}

export {
  createSpriteMaterial
}
